<template>
	<view class="welcome-container">
		<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
		<view class="welcome-text">
			<text class="title">疫苗预约平台</text>
			<text class="subtitle">便捷预约，安心接种，根神大帝守护您</text>
		</view>
		<view class="button-group">
			<button class="btn login-btn" @click="navigateToLogin">登录</button>
			<button class="btn register-btn" @click="navigateToRegister">注册</button>
		</view>
	</view>
</template>

<script setup>
const navigateToLogin = () => {
	uni.navigateTo({
		url: '/pages/login/login'
	})
}

const navigateToRegister = () => {
	uni.navigateTo({
		url: '/pages/register/register'
	})
}
</script>

<style lang="scss">
.welcome-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 50rpx;
	height: 100vh;
	background-color: $uni-bg-color;

	.logo {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 60rpx;
	}
	
	.welcome-text {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 100rpx;
		
		.title {
			font-size: 48rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 20rpx;
		}
		
		.subtitle {
			font-size: 32rpx;
			color: #666666;
		}
	}
	
	.button-group {
		width: 80%;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
		
		.btn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			font-size: 32rpx;
			font-weight: bold;
			
			&.login-btn {
				background-color: #007AFF;
				color: $uni-bg-color;
			}
			
			&.register-btn {
				background-color: $uni-bg-color;
				color: #007AFF;
				border: 2rpx solid #007AFF;
			}
		}
	}
}
</style> 